<template>
    	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="consultation-detail-page">
   

    <!-- 咨询信息卡片 -->
    <view class="consult-info-card">
      <view class="card-header">
        <view class="elderly-info">
          <text class="elderly-name text13">{{ consultationData.elderlyName }}</text>
          <text class="consult-type text12">{{ consultationData.consultType }}</text>
        </view>
        <view class="status-tag" :class="statusClass">
          <text class="status-text text12">{{ statusText }}</text>
        </view>
      </view>

      <view class="consult-content">
        <text class="content-text text11">{{ consultationData.content }}</text>
      </view>

      <view class="consult-meta">
        <text class="create-time text11">发起时间：{{ consultationData.createTime }}</text>
        <text class="consult-id text11">咨询编号：{{ consultationData.id }}</text>
      </view>
    </view>

    <!-- 回复区域 -->
    <view class="reply-section" v-if="hasReplies">
      <view class="section-title">
        <text class="title-text text13">回复记录</text>
        <text class="reply-count text12">{{ consultationData.replyList.length }} 条回复</text>
      </view>

      <view class="reply-list">
        <view 
          class="reply-item" 
          v-for="(reply, index) in consultationData.replyList" 
          :key="index"
        >
          <view class="reply-header">
            <view class="replyer-info">
              <text class="replyer-name text12">{{ reply.replyerName }}</text>
              <text class="replyer-role text11" :class="reply.isExpert ? 'role-expert' : 'role-ordinary'">
                {{ reply.isExpert ? '健康专家' : '家属' }}
              </text>
            </view>
            <text class="reply-time text11">{{ reply.replyTime }}</text>
          </view>
          <view class="reply-content">
            <text class="content text11">{{ reply.content }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 回复输入区域 -->
    <view class="reply-input-area" v-if="!isClosed">
      <textarea 
        class="reply-textarea" 
        placeholder="请输入回复内容..." 
        v-model="replyContent"
        maxlength="500"
      ></textarea>
      <view class="reply-footer" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
        <text class="word-count text11">{{ replyContent.length }}/500</text>
        <button 
          class="send-btn" 
          @click="handleSendReply"
          :disabled="!replyContent.trim()"
        >
          发送回复
        </button>
      </view>
    </view>

    <!-- 已关闭提示 -->
    <view class="closed-tip" v-if="isClosed">
      <uni-icons type="info" size="16" color="#86909C"></uni-icons>
      <text class="tip-text">此咨询已关闭，无法继续回复</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
	import {
		useFontSizeStore
	} from '@/stores/fontSizeStore';
		const fontSizeStore = useFontSizeStore();
    const safeAreaInsets = ref({ bottom: 0 })

// -------------- 状态管理 --------------
// 咨询详情数据
const consultationData = ref({
  id: '',
  elderlyName: '',
  consultType: '',
  content: '',
  status: '',
  createTime: '',
  replyList: []
});

// 回复内容
const replyContent = ref('');

// -------------- 计算属性 --------------
// 咨询状态文本
const statusText = computed(() => {
  const statusMap = {
    pending: '待回复',
    replied: '已回复',
    closed: '已关闭'
  };
  return statusMap[consultationData.value.status] || '未知';
});

// 咨询状态样式
const statusClass = computed(() => {
  const classMap = {
    pending: 'status-pending',
    replied: 'status-replied',
    closed: 'status-closed'
  };
  return classMap[consultationData.value.status] || '';
});

// 是否有回复
const hasReplies = computed(() => {
  return consultationData.value.replyList && consultationData.value.replyList.length > 0;
});

// 是否已关闭
const isClosed = computed(() => {
  return consultationData.value.status === 'closed';
});

// -------------- 生命周期 --------------
// 页面加载时获取数据
onMounted(() => {
  	const info = uni.getSystemInfoSync()
	safeAreaInsets.value = info.safeAreaInsets || { bottom: 0 }

  // 在UniApp中获取页面参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const consultId = currentPage.options.id;
  
  fetchConsultationDetail(consultId);
});

// -------------- 数据请求 --------------
// 获取咨询详情
const fetchConsultationDetail = (id) => {
  // 模拟API请求
  setTimeout(() => {
    const mockData = {
      id: 'CONSULT-202409001',
      elderlyName: '张建国',
      consultType: '健康咨询',
      content: '我父亲今年68岁，有高血压病史5年，一直在服用硝苯地平控释片。最近一周血压不太稳定，早上测量常在140/90左右波动，偶尔会到150/95。请问这种情况需要调整用药吗？日常饮食需要注意什么？是否需要立即去医院检查？',
      status: 'pending',
      createTime: '2024-09-01 09:23:45',
      replyList: [
        {
          replyerName: '李医生',
          isExpert: true,
          replyTime: '2024-09-01 14:35:22',
          content: '您好，根据您描述的情况，建议先连续监测3天血压，每天早晚各一次并记录。如果持续高于140/90，建议到医院复诊调整用药。'
        },
        {
          replyerName: '张先生',
          isExpert: false,
          replyTime: '2024-09-01 16:12:38',
          content: '谢谢李医生的回复，请问测量血压前需要注意什么？需要空腹吗？'
        }
      ]
    };
    
    consultationData.value = mockData;
  }, 500);
};

// -------------- 事件处理 --------------
// 返回上一页
const handleBack = () => {
  uni.navigateBack({ delta: 1 });
};

// 发送回复
const handleSendReply = () => {
  if (!replyContent.value.trim()) return;
  
  const newReply = {
    replyerName: '当前用户',
    isExpert: false,
    replyTime: new Date().toLocaleString(),
    content: replyContent.value.trim()
  };
  
  consultationData.value.replyList.push(newReply);
  consultationData.value.status = 'replied';
  replyContent.value = '';
  
  uni.showToast({
    title: '回复发送成功',
    icon: 'success',
    duration: 1500
  });
};

// 关闭咨询
const handleCloseConsultation = () => {
  uni.showModal({
    title: '提示',
    content: '确定要关闭此咨询吗？关闭后将无法继续回复。',
    confirmText: '确定',
    cancelText: '取消',
    success: (res) => {
      if (res.confirm) {
        consultationData.value.status = 'closed';
        uni.showToast({
          title: '咨询已关闭',
          icon: 'none',
          duration: 1500
        });
      }
    }
  });
};
</script>

<style scoped lang="scss">
$primary: #1890FF;
$success: #00B42A;
$warning: #FF7D00;
$gray: #86909C;
$light-gray: #F2F3F5;
$border-gray: #EEEEEE;

// 页面基础样式
.consultation-detail-page {
  min-height: 100vh;
  padding:30rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: 100px;
  
}

// 导航栏样式
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  padding: 0 16px;
  background-color: #FFFFFF;

  .nav-back {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-title {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }

  .close-btn {
    background-color: transparent;
    border: none;
    color: $warning;
    font-size: 16px;
    padding: 0 10px;
    line-height: normal;
  }
}

// 咨询信息卡片
.consult-info-card {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 30rpx;
  margin: 30rpx 0;
  margin-top: 0;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .elderly-name {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      margin-right: 12px;
    }

    .consult-type {
      font-size: 13px;
      color: $gray;
      background-color: $light-gray;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .status-tag {
      padding: 3px 10px;
      border-radius: 4px;

      .status-text {
        font-size: 13px;
        font-weight: 500;
      }
    }

    .status-pending {
      background-color: rgba(255, 125, 0, 0.1);
      .status-text { color: $warning; }
    }

    .status-replied {
      background-color: rgba(0, 180, 42, 0.1);
      .status-text { color: $success; }
    }

    .status-closed {
      background-color: rgba(134, 144, 156, 0.1);
      .status-text { color: $gray; }
    }
  }

  .consult-content {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid $border-gray;

    .content-text {
      font-size: 15px;
      color: #333333;
      line-height: 1.6;
    }
  }

  .consult-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: $gray;
  }
}

// 回复区域
.reply-section {
  background-color: #FFFFFF;
  border-radius: 8px;
  padding: 30rpx;
  margin:30rpx 0;
  // box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid $border-gray;

    .title-text {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }

    .reply-count {
      font-size: 13px;
      color: $gray;
    }
  }

  .reply-item {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .reply-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;

      .replyer-name {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        margin-right: 8px;
      }

      .replyer-role {
        font-size: 12px;
        padding: 1px 6px;
        border-radius: 4px;
      }

      .role-expert {
        background-color: rgba(24, 144, 255, 0.1);
        color: $primary;
      }

      .role-ordinary {
        background-color: $light-gray;
        color: $gray;
      }

      .reply-time {
        font-size: 12px;
        color: $gray;
      }
    }

    .content {
      font-size: 14px;
      color: #666666;
      line-height: 1.6;
    }
  }
}

// 回复输入区域
.reply-input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFFFFF;
  padding: 12px 16px;
  border-top: 1px solid $border-gray;

  .reply-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    background-color: $light-gray;
    border-radius: 8px;
    font-size: 14px;
    resize: none;
    border: none;
    outline: none;
    margin-bottom: 12px;
  }

  .reply-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .word-count {
      font-size: 12px;
      color: $gray;
    }

    .send-btn {
      background-color: $primary;
      color: #FFFFFF;
      border: none;
      border-radius: 4px;
      padding: 8px 16px;
      font-size: 14px;
      height: auto;
      line-height: normal;

      &:disabled {
        background-color: #CCCCCC;
      }
    }
  }
}

// 已关闭提示
.closed-tip {
  text-align: center;
  padding: 16px;
  font-size: 14px;
  color: $gray;
  display: flex;
  align-items: center;
  justify-content: center;

  .tip-text {
    margin-left: 8px;
  }
}
</style>
    